<!--布局块排列布局-->

<template>
  <div class="arrange-the-layout w-h-full">
    <strong>对齐：</strong>
    <Tooltip transfer content="左对齐">
      <Button size="small" class="m-r-5px" @click="arrangeTheLayout('leftJustifying')"><Icon custom="iconfont icon-left-justifying"/></Button>
    </Tooltip>
    <Tooltip transfer content="右对齐">
      <Button size="small" class="m-r-5px" @click="arrangeTheLayout('rightJustifying')"><Icon custom="iconfont icon-right-justifying"/></Button>
    </Tooltip>
    <Tooltip transfer content="顶对齐">
      <Button size="small" class="m-r-5px" @click="arrangeTheLayout('topJustifying')"><Icon custom="iconfont icon-top-justifying"/></Button>
    </Tooltip>
    <Tooltip transfer content="底对齐">
      <Button size="small" class="m-r-5px" @click="arrangeTheLayout('bottomJustifying')"><Icon custom="iconfont icon-bottom-justifying"/></Button>
    </Tooltip>
    <Tooltip transfer content="水平居中对齐">
      <Button size="small" class="m-r-5px" @click="arrangeTheLayout('hCenterJustifying')"><Icon custom="iconfont icon-h-center-justifying"/></Button>
    </Tooltip>
    <Tooltip transfer content="垂直居中对齐">
      <Button size="small" class="m-r-5px" @click="arrangeTheLayout('vCenterJustifying')"><Icon custom="iconfont icon-v-center-justifying"/></Button>
    </Tooltip>
  </div>
</template>

<script>

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'ArrangeTheLayout',
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      arrangeTheLayout (type) {
        let layoutItems = [];
        this.currentSelectLayoutItemIds.forEach(layoutItemId => {
          layoutItems.push(this.$store.getters['designer/getLayoutItemById'](layoutItemId))
        });

        // 左对齐
        if (type == 'leftJustifying') {
          let mixLeftLayoutItem = {id: '', left: 10000000};
          layoutItems.forEach(layoutItem => {
            if (layoutItem.layoutItemConfigData.left < mixLeftLayoutItem.left) {
              mixLeftLayoutItem = {
                id: layoutItem.id,
                left: layoutItem.layoutItemConfigData.left
              }
            }
          });
          layoutItems.forEach(layoutItem => {
            if (layoutItem.id != mixLeftLayoutItem.id) {
              this.$store.commit('designer/setLayoutItemLeftAndTop', {
                id: layoutItem.id,
                left: mixLeftLayoutItem.left,
                top: layoutItem.layoutItemConfigData.top
              })
            }
          });
        }
        // 右对齐
        else if (type == 'rightJustifying') {
          let maxLeft = 0;
          let maxLeftLayoutItem = {id: '', left: 0};
          layoutItems.forEach(layoutItem => {
            if (layoutItem.layoutItemConfigData.left > maxLeft) {
              maxLeft = layoutItem.layoutItemConfigData.left;
              maxLeftLayoutItem = {
                id: layoutItem.id,
                left: layoutItem.layoutItemConfigData.left + layoutItem.layoutItemConfigData.width
              }
            }
          });
          layoutItems.forEach(layoutItem => {
            if (layoutItem.id != maxLeftLayoutItem.id) {
              this.$store.commit('designer/setLayoutItemLeftAndTop', {
                id: layoutItem.id,
                left: maxLeftLayoutItem.left - layoutItem.layoutItemConfigData.width,
                top: layoutItem.layoutItemConfigData.top
              })
            }
          });
        }
        // 顶对齐
        else if (type == 'topJustifying') {
          let mixTopLayoutItem = {id: '', top: 10000000};
          layoutItems.forEach(layoutItem => {
            if (layoutItem.layoutItemConfigData.top < mixTopLayoutItem.top) {
              mixTopLayoutItem = {
                id: layoutItem.id,
                top: layoutItem.layoutItemConfigData.top
              }
            }
          });
          layoutItems.forEach(layoutItem => {
            if (layoutItem.id != mixTopLayoutItem.id) {
              this.$store.commit('designer/setLayoutItemLeftAndTop', {
                id: layoutItem.id,
                left: layoutItem.layoutItemConfigData.left,
                top: mixTopLayoutItem.top
              })
            }
          });
        }
        // 底对齐
        else if (type == 'bottomJustifying') {
          let maxTop = 0;
          let maxTopLayoutItem = {id: '', top: 0};
          layoutItems.forEach(layoutItem => {
            if (layoutItem.layoutItemConfigData.top > maxTop) {
              maxTopLayoutItem = {
                id: layoutItem.id,
                top: layoutItem.layoutItemConfigData.top + layoutItem.layoutItemConfigData.height
              }
            }
          });
          layoutItems.forEach(layoutItem => {
            if (layoutItem.id != maxTopLayoutItem.id) {
              this.$store.commit('designer/setLayoutItemLeftAndTop', {
                id: layoutItem.id,
                left: layoutItem.layoutItemConfigData.left,
                top: maxTopLayoutItem.top - layoutItem.layoutItemConfigData.height
              })
            }
          });
        }
        // 水平居中对齐
        else if (type == 'hCenterJustifying') {
          layoutItems.forEach(layoutItem => {
            let centerCoord = parseInt(this.layout.layoutConfigData.width/2);
            this.$store.commit('designer/setLayoutItemLeftAndTop', {
              id: layoutItem.id,
              left: centerCoord - parseInt(layoutItem.layoutItemConfigData.width/2),
              top: layoutItem.layoutItemConfigData.top
            })
          });
        }
        // 垂直居中对齐
        else if (type == 'vCenterJustifying') {
          layoutItems.forEach(layoutItem => {
            let centerCoord = parseInt(this.layout.layoutConfigData.height/2);
            this.$store.commit('designer/setLayoutItemLeftAndTop', {
              id: layoutItem.id,
              left: layoutItem.layoutItemConfigData.left,
              top: centerCoord - parseInt(layoutItem.layoutItemConfigData.height/2),
            })
          });
        }

        this.$DesignerCommonUtil.updateGroupItemStoreSize(this.$DesignerCommonUtil.getLayoutItemBelongGroupItemId(layoutItems[0].id, this.layoutGroup));
      }
    },
    computed: {
      ...mapFields({
        layout: 'pageMetadata.layout',
        layoutGroup: 'pageMetadata.layout.layoutGroup',
        currentSelectLayoutItemId: 'currentSelectLayoutItemId',
        currentSelectLayoutItemIds: 'currentSelectLayoutItemIds',
      })
    }
  }
</script>

<style lang="less" scoped>
  .arrange-the-layout {
    margin-top: 5px;
  }
</style>
